
<template>
  <div>
    <p>{{ num }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 10,
      b: 5,
      message: "HELLO WORLD",
    };
  },
  computed: {
    // 计算属性自带缓存的特性
    //流程:第一次调用计算属性函数执行,会把return的值装到缓存中,
    // 以后再访问这个计算属性,直接从缓存里拿结果
    num() {
      return this.a + this.b;
    },
    reverseMessage() {
      console.log("计算属性执行");
      return this.message.split("").reverse().join("");
    },
  },
  methods: {
    getMessage() {
      console.log("方法执行几次");
      return this.message.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>